@import 'colors';

html {

    body {
        #main {
            .add-child {
                display:none;
                &.selected {
                    display:inline-block;
                }
            }

            .tree-container {
                min-width:200px;
                background:rgba($grey, 0.1);

                &.loading {
                    background:white image-url('throbber-content.gif') no-repeat center center;
                    border:1px solid $green;

                    >* {visibility:hidden}
                }

                &.tree-reordering {
                    .tree {
                        li {
                            &.selected {
                                .label {
                                    padding:0;
                                    background:transparent;
                                    color:black
                                }
                            }
                        }
                    }
                }

                .toolbar {
                    margin:3px;
                    padding-bottom:3px;
                    border-bottom:1px solid rgba($grey, 0.3);

                    input {
                        background:transparent;
                        color:black;
                        font-size:10px;

                        &[disabled] {
                            opacity:0.2
                        }
                    }
                }

                >.tree {
                    margin:10px;
                }

                li {
                    a {
                        color:black;
                        text-decoration: none;
                    }

                    .toggle {
                        background: image-url('jquery-ui/ui-icons_222222_256x240.png') no-repeat -32px -16px;
                    }

                    .tree-reorder-handle {
                        background: image-url('jquery-ui/ui-icons_222222_256x240.png') no-repeat -32px -80px;
                        cursor:move;
                    }
                    .tree-sort-handle {
                        background: image-url('jquery-ui/ui-icons_222222_256x240.png') no-repeat -128px -32px;
                        cursor:ns-resize;
                    }

                    &.selected {
                        >.label {
                            background:$orange;
                            padding:0 4px;
                            color:white;
                        }
                    }
                    &.opened {
                        >.toggle {
                            background-position:-64px -16px
                        }
                    }

                    &.tree-sort-placeholder {
                        background:rgba($grey, 0.3)
                    }
                    &.ui-sortable-helper {
                        .label {
                            background:transparent;
                            color:black;
                        }
                    }

                    &.tree-reorder-hover {
                        background:transparent;

                        >.label {
                            background:$grey;
                            color:white;
                            padding:0 4px;
                        }
                    }
                    &.ui-draggable-dragging {
                        .label {
                            background:transparent;
                            color:black
                        }
                    }
                }
            }

            .category-main {
                min-width:500px;
                min-height: 300px;

                &.loading {
                    color:transparent;
                    background: image-url('throbber-content.gif') no-repeat center center;

                    >* {
                        display:none;
                    }
                }

                form {
                    padding-top:0;

                    h1 {
                        padding:0 0 10px
                    }

                    input {
                        width:95%
                    }

                    input[type=submit] {
                        width:auto
                    }
                }
            }
        }
    }
}

@media all and(max-width:900px) {
    html {
        body {
            #main {
                .tree-container {
                    float:none;
                    width:96%;
                }
                .category-main {
                    min-width: 0;
                }
            }
        }
    }
}